<template>
  <div>
    <div class="demo-image">
      <div v-for="(item,index) in list" :key="index" class="block">
        <el-image style="width: auto; height: auto" :src=item.img fit="cover" @click="routerClick(item.id)"/>
        <span class="demonstration hidden" :title="item.name">{{ item.name }}</span>
        <el-row>
          <el-col :span="10" class="demonstration">￥{{ item.price }}</el-col>
          <el-col :span="4">
            <el-icon @click="routerClick(item.id)">
              <View/>
            </el-icon>
          </el-col>
          <el-col :span="4">
            <el-icon @click="cartAdd(item.id)">
              <ShoppingCart/>
            </el-icon>
          </el-col>
          <el-col :span="4">
            <el-icon  @click="orderClick(item.id)">
              <GoodsFilled/>
            </el-icon>
          </el-col>
          <el-col :span="2"></el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import {ElMessageBox} from 'element-plus';
import {userGoodsStore} from '@/store/good'
import {View, ShoppingCart, GoodsFilled} from '@element-plus/icons-vue/dist';

export default {
  props: ['list'],
  data() {
    return {
      data: [],
      store: userGoodsStore(),
      time: new Date()
    }
  },
  components: {
    View,
    ShoppingCart,
    GoodsFilled,
  },
  methods: {
    routerClick(val) {
      if (sessionStorage.getItem('username') === '游客' || sessionStorage.getItem('username') === null) {
        console.log(sessionStorage.getItem('username'))
        this.$router.push('/login')

      } else {
        this.data = this.list.find(e => e.id === val)
        this.$router.push({path: '/detail', query: this.data})
      }
    },
    cartAdd(val) {
      if (sessionStorage.getItem('username') === '游客'|| sessionStorage.getItem('username') === null) {
        console.log(sessionStorage.getItem('username'))
        this.$router.push('/login')

      } else {
        console.log(sessionStorage.getItem('username'))
        ElMessageBox.alert('购买成功', '温馨提示', {
          confirmButtonText: 'OK',

        })
        this.data = this.list.find(e => e.id === val)
        this.store.cartAdd({
          id: this.data.id,
          name: this.data.name,
          total: this.data.price,
          price: this.data.price,
          num: 1,
        })
        console.log(this.store)
      }
    },
    orderClick(val) {
      if (sessionStorage.getItem('username') === '游客'|| sessionStorage.getItem('username') === null)
        this.$router.push('/login')
      else {
        ElMessageBox.alert('您已加入订单，请前往订单页进行付款', '温馨提示', {
          confirmButtonText: 'OK',
        });
        this.data = this.list.find(e => e.id === val)
        console.log(this.data)
        this.data.orderID = this.time.getFullYear().toString() + (this.time.getMonth() + 1).toString() + this.time.getDate().toString() + Math.random().toString().slice(2, 10)
        this.store.orderAdd({
          orderID: this.data.orderID,
          time: this.time,
          num: 1,
          sum: this.data.price,
          isOrdered: false, //记录是否完成支付
          child: [
            {
              id: this.data.id,
              name: this.data.name,
              price: this.data.price,
              num: 1,
              total: this.data.price
            }
          ]
        })
      }

    },
  }
}

</script>

<style scoped>
.demo-image .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  display: inline-block;
  width: 20%;
  box-sizing: border-box;
  vertical-align: top;
}

.demo-image .block:last-child {
  border-right: none;
}

.demo-image .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}

.hidden {
  margin: 0 auto;
  width: 200px;
  height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box !important;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
</style>